<!DOCTYPE html>
<html>
<head>
    <title>区域管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../../resources/lib/bui/css/bui-min.css" rel="stylesheet">
    <link href="../../resources/lib/bui/css/dpl-min.css" rel="stylesheet">
</head>
<body>
<div class="demo-content">
    <button type="button" class="button" onclick="addFAreaItem()" style="margin-right:10px; width: 110px;">添加主区域</button>
    <button type="button" class="button" onclick="addSAreaItem()" style="margin-right:10px; width: 110px;">添加子区域</button>
    <button type="button" class="button" onclick="removeItem()" style="margin-right:10px; width: 70px;">删除</button>
    <br>
    <br>
    <div class="row">
        <div class="span4" style="padding: 10px">
            <div class="panel panel-head-borded panel-small">
                <div class="panel-header">区域列表</div>
                <div id="t1">
                </div>
            </div>
        </div>
        <div class="span16">
            <div class="panel panel-head-borded panel-small">
                <form class="form-horizontal" name="aForm" method="" action="" id="aForm">
                    <legend>区域信息</legend>
                    <div class="row">
                        <div class="control-group span8">
                            <label class="control-label">名称：</label>
                            <div class="controls">
                                <input name="name" type="text" class="input-normal control-text">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="control-group span15">
                            <label class="control-label">组名：</label>
                            <div class="controls">
                                <input name="group" type="text" class="input-normal control-text">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="control-group span15">
                            <label class="control-label">编号：</label>
                            <div class="controls">
                                <input name="code" type="text" class="input-normal control-text">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="control-group span15">
                            <label class="control-label">编辑日期：</label>
                            <div class="controls control-row4">
                                <input name="start" class="input-small calendar" type="text">
                            </div>
                        </div>
                    </div>
                    <legend>逻辑信息</legend>
                    <div class="row">
                        <div class="control-group span15">
                            <label class="control-label">人数上限：</label>
                            <div class="controls">
                                <input name="maxmum" type="text" class="input-normal control-text">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="control-group span15">
                            <label class="control-label">人数下限：</label>
                            <div class="controls">
                                <input name="minmum" type="text" class="input-normal control-text">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="control-group span15">
                            <label class="control-label">等级：</label>
                            <div class="controls">
                                <input name="level" type="text" class="input-normal control-text">
                            </div>
                        </div>
                    </div>
                    <div class="row form-actions actions-bar">
                        <div class="span13 offset3 ">
                            <button type="submit" class="button button-primary">保存</button>
                            <button type="reset" class="button">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="../../resources/lib/bui/js/jquery-1.8.1.min.js"></script>
    <script src="../../resources/lib/bui/js/bui-min.js"></script>
    <!-- script start-->
    <script type="text/javascript">
        BUI.use(['bui/tree','bui/grid','bui/data'],function (Tree,Grid,Data) {
            var data = [
                {text : 'A区域',id : '1',expanded : true,children: [{text : 'A1区域',id : '11'}]},
                {text : 'B区域',id : '2',expanded : true,children : [
                    {text : 'B1区域',id : '21',children : [{text : 'B11区域',id : '211'},{text : 'B12区域',id : '212'}]},
                    {text : 'B2区域',id : '22'}
                ]},
                {text : 'C区域',id : '3'},
                {text : 'D区域',id : '4'}
            ];
            //由于这个树，不显示根节点，所以可以不指定根节点
            var tree = new Tree.TreeList({
                render : '#t1',
                nodes : data,
                showLine : true,
                height:480
            });
            tree.render();

            tree.on('selectedchange',function(ev){
                var node = ev.item;

                $("#aForm input[name=name]").val(tree.getSelectedText());
            });
            var firstLeaf = tree.findNode('11'); //获取第一个叶子节点
            tree.setSelected(firstLeaf);
        });
        function addFAreaItem() {
            /*$("#dcForm").hide();
             $("#doorForm").hide();*/
            $("#aForm input[type=reset]").click();
            $("#aForm input[name='name']").val("新建主区域");
            //var node = tree.getSelected();
            $("#aForm input[name=id]").val(null);// 删除id属性
        }
        function addSAreaItem() {
            $("#aForm input[type=reset]").click();
            $("#aForm input[name='name']").val("下级子区域");
            var node = tree.getSelected();
            $("#aForm input[name=id]").val(null);// 删除id属性
        }
    </script>
    <script type="text/javascript">
        BUI.use('bui/calendar',function(Calendar){
            var datepicker = new Calendar.DatePicker({
                trigger:'.calendar',
                autoRender : true
            });
        });
    </script>
    <!-- script end -->
</div>
</body>
</html>